<template>
	<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
	<view class="content">
		<!-- 置顶数据 -->
		<view class="card" style="padding: 20rpx;">
			<view class="data-item u-flex" v-if="quantity">
				<view class="item">
					<view class="num">
						{{quantity.statusProcess ? quantity.statusProcess : '0'}}
					</view>
					<view class="item-text">
						待处理工单
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{quantity.statusProgress ? quantity.statusProgress : '0'}}
					</view>
					<view class="item-text">
						进展中工单
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{quantity.feeApply ? quantity.feeApply : '0'}}
					</view>
					<view class="item-text">
						待审批费用
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{quantity.spareApply ? quantity.spareApply : '0'}}
					</view>
					<view class="item-text">
						待审批备件
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{quantity.spareShip ? quantity.spareShip : '0'}}
					</view>
					<view class="item-text">
						待发货备件
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{quantity.statusSettlement ? quantity.statusSettlement : '0'}}
					</view>
					<view class="item-text">
						待结算工单
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{quantity.statusEvaluation ? quantity.statusEvaluation : '0'}}
					</view>
					<view class="item-text">
						待评价工单
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{ quantity.workorderSum ? (quantity.workorderSum == 0 ? '100%' : ((quantity.workorderFulfill * 100) / (quantity.workorderSum)).toFixed(1) + '%') : '0%'}}
					</view>
					<view class="item-text" style="font-size: 24rpx;">
						全年工单完成率
					</view>
				</view>
			</view>
		</view>

		<view class="card-list">
			<!-- 用户信息 -->
			<view class="DetailsTmplate user-info FlexBetween" style="padding: 20rpx; 30rpx">
				<view class="user-name">
					{{Text}}
				</view>
				<view class="check" @click="reSwitch">
					<u-icon name="account" color="#333" size="56"></u-icon>
					<view class="">
						切换
					</view>
				</view>
			</view>

			<!-- 导航栏 -->
			<view class="card mb-10">
				<view class="card-item u-flex" style="padding: 20rpx 0 0;">
					<view class="tab-btn u-flex-column" v-for="item in tabs" :key="item.id"
						@click="goTabs(item.url,item.type)">
						<view class="icon-box" :style="{background: item.bg}">
							<i :class="item.icon"></i>
						</view>
						<view class="item-text" style="margin-top: 10rpx; font-size: 26rpx;">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>

			<!-- 区域分布-饼图 -->
			<view class="card mb-10">
				<view class="title">区域分布</view>
				<view class="card-content u-flex" v-if="address && !popShow">
					<uni-ec-canvas class="uni-ec-canvas" canvas-id="multi-charts-line" :ec="address"></uni-ec-canvas>
					<view style="flex: 1;">
						<view class="item-list" v-for="(item,index) in addressList" :key="item.id" v-if="index < 5">
							<view style="display: flex;align-items: center;">
								<view class="color-div" :style="{'background': colors[index]}"></view>
								<view>{{item.id}}</view>
							</view>
							<view class="text-gray">{{parseFloat(item.text / addressTotal * 100).toFixed(2)}}%</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 服务分类-柱状图 -->
			<view class="card mb-10">
				<view class="title">服务分类</view>
				<view class="card-content u-flex" v-if="malfunction && !popShow">
					<uni-ec-canvas class="malfunction" canvas-id="multi-charts-line" :ec="malfunction"></uni-ec-canvas>
				</view>
			</view>
			<!-- 实时服务数据 -->
			<view class="card mb-10">
				<view class="title">实时服务数据</view>
				<view class="card-content u-flex" v-if="summarygraph && !popShow">
					<uni-ec-canvas class="malfunction" canvas-id="multi-charts-line" :ec="summarygraph"></uni-ec-canvas>
				</view>
			</view>

		</view>

		<!--工单类型-弹窗 -->
		<custompop
			ref="select-module" 
			ptitle="选择工单" 
			:botshow="false" 
			:isselect="true"
			:radioarr="JSON.stringify(modulelist)" 
			@saveRadiovalClick="selectRadio"
			@closeclick="closePop"
			>
		</custompop>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				custAccid: '',
				userInfo: {},
				acId: '',
				roleId: '',
				Text: '',

				workNumdata: {
					newProgress: '', //新进展数量
					waitEvent: '', //待处理数量
					stayDistriNetwork: '', //待分配网点
					stayStatement: '', //待结单
					progress: '', //进展中
					stayAcceptance: '', //待受理
					loginForm: [],
				},
				feelist: {},
				sparelist: {},
				popShow: false,			// 禁止穿透
				tabs: [{
						id: 0,
						name: '新建工单',
						type: 2,
						url: 'none',
						icon: 'iconfont icon-xinjian',
						bg: '#fd7400'
					},
					{
						id: 1,
						name: '工单列表',
						type: 0,
						url: `/pages/index/worklist?typeName=全部工单`,
						icon: 'iconfont icon-a-quanbu2',
						bg: '#fd7400'
					},
					{
						id: 2,
						name: '备件审核',
						type: 1,
						url: `/pagesA/pages/spare/sparelist?typeName=待审备件`,
						icon: 'iconfont icon-shenhe2',
						bg: '#7948ea'
					},
					{
						id: 3,
						name: '费用审核',
						type: 1,
						url: `/pagesA/pages/money/money?typeName=审核中`,
						icon: 'iconfont icon-jinzhan-',
						bg: '#00baad'
					},
					{
						id: 4,
						name: '客户列表',
						type: 1,
						url: `/pagesA/pages/custom/custom`,
						icon: 'iconfont icon-gongdan-quanbugongdan',
						bg: '#ff5543'
					},
					{
						id: 5,
						name: '一物一码',
						type: 1,
						url: `/pagesA/pages/code/codelist?typeName=全部编码`,
						icon: 'iconfont icon-daifahuo',
						bg: '#268af0'
					},
					{
						id: 6,
						name: '仓储管理',
						type: 0,
						url: `/pages/index/staging?typeName=仓储管理`,
						icon: 'iconfont icon-rukuon',
						bg: '#fd7400'
					},
					{
						id: 7,
						name: '资金管理',
						type: 0,
						url: `/pages/index/staging?typeName=资金管理`,
						icon: 'iconfont icon-shouquanbohui',
						bg: '#fd7400'
					},
				],
				quantity: {}, // 数据
				modulelist: [],
				addressList: [], // 区域分布数据
				addressTotal: '', // 区域分布数据总数
				colors: ['#4aa1ff', '#4bcbca', '#57cb77', '#fad447', '#f3637f'],
				address: { // 区域分布饼图数据
					option: {
						series: [{
							name: 'Access From',
							type: 'pie',
							radius: ['0%', '80%'],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center'
							},
							labelLine: {
								show: false
							},
							itemStyle: {
								borderRadius: 10,
								borderWidth: 10,
								boderColor: '#fff'
							},
							data: [],
						}]
					}
				},

				malfunctionList: [], // 服务分类数据
				malfunction: { // 服务分类柱状图数据
					option: {
						xAxis: {
							max: 'dataMax',
						},
						yAxis: {
							type: 'category',
							data: [],
							inverse: true,
						},
						grid: {
							left: '20%', // 距离左侧的距离
							right: '10%', // 距离右侧的距离
							bottom: '10%', // 距离底部的距离
							top: '5%', // 距离顶部的距离
						},
						series: [{
							realtimeSort: true,
							name: 'X',
							type: 'bar',
							data: [],
							itemStyle: {
								normal: {
									color: '#4aa0ff', // 设置柱子的颜色为红色
								}
							},
						}],
					}
				},

				summarygraph: { // 实时服务折线图数据
					option: {
						xAxis: {
							type: 'category',
							data: []
						},
						yAxis: {
							type: 'value'
						},
						tooltip: {
							trigger: 'axis'
						},
						grid: {
							left: '10%', // 距离左侧的距离
							right: '10%', // 距离右侧的距离
							bottom: '10%', // 距离底部的距离
							top: '5%', // 距离顶部的距离
						},
						series: [{
								data: [],
								type: 'line'
							},
							{
								data: [],
								type: 'line'
							}
						]
					}
				}

			}
		},
		onLoad() {
			this.custAccid = uni.getStorageSync('custAccid')
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.acId = uni.getStorageSync('acId')
			this.roleId = uni.getStorageSync('roleId')

			this.getPullRefresh();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh();
		},
		onShow() {
			this.closePop()
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh() {
				console.clear()
				this.custAccid = uni.getStorageSync('custAccid')
				this.getConsoleQuantity();
				this.getConsoleAddress();
				this.getConsoleMalfunction();
				this.getConsoleSummaryGraph();
				this.getOrdermodule();

				let hour = new Date().getHours();
				if (hour >= 0 && hour <= 10) {
					this.Text = `早上好！`;
				} else if (hour > 10 && hour <= 14) {
					this.Text = `中午好！`;
				} else if (hour > 14 && hour <= 18) {
					this.Text = `下午好！`;
				} else if (hour > 18 && hour <= 24) {
					this.Text = `晚上好！`;
				}
				this.Text += this.userInfo.name
			},
			// 获取统计数量
			async getConsoleQuantity() {
				const res = await uni.$api.currency.getConsoleQuantity(this.custAccid)
				this.quantity = res.data;
			},
			// 获取区域分布数据
			async getConsoleAddress() {
				const res = await uni.$api.currency.getConsoleAddress(this.custAccid);
				console.log('获取区域分布数据------', res)
				if (res.code == 0) {
					this.addressList = res.data.address;
					this.addressTotal = res.data.total;
					this.address.option.series.data = [];

					res.data.address.forEach((val, index) => {
						if (index < 5) {
							this.address.option.series[0].data.push({
								value: parseInt(val.text),
								name: val.id,
								itemStyle: index < this.colors.length ? {
									color: this.colors[index]
								} : {}
							})
						}
					})
				}
			},
			// 获取服务分类数据
			async getConsoleMalfunction() {
				const res = await uni.$api.currency.getConsoleMalfunction(this.custAccid);
				console.log('获取服务分类数据------', res)
				if (res.code == 0) {
					this.malfunctionList = res.data.malfunction;
					this.malfunction.option.yAxis.data = [];
					this.malfunction.option.series[0].data = [];
					res.data.malfunction.forEach((val, index) => {
						this.malfunction.option.yAxis.data.push(val.id)
						this.malfunction.option.series[0].data.push(parseInt(val.text))
					})
				}
			},
			// 获取实时服务数据
			async getConsoleSummaryGraph() {
				const res = await uni.$api.currency.getConsoleSummaryGraph(this.custAccid, this.acId, this.roleId);
				console.log('获取实时服务数据-----', res)
				if (res.code == 0) {
					this.summarygraph.option.xAxis.data = [];
					this.summarygraph.option.series[0].data = [];
					this.summarygraph.option.series[1].data = [];
					res.data.add.forEach((val, index) => {
						this.summarygraph.option.xAxis.data.push(val.id)
						this.summarygraph.option.series[0].data.push(parseInt(val.text))
					})
					res.data.carryOut.forEach((val, index) => {
						this.summarygraph.option.series[1].data.push(parseInt(val.text))
					})
				}
			},
			// 获取工单类型
			async getOrdermodule() {
				const res = await uni.$api.work.ordermodule({
					custAccId: this.custAccid
				})
				if (res.code == 0) {
					this.modulelist = res.data.map((res => {
						res.ischeck = false;
						res.label = res.title
						return res;
					}));
				}
				console.log(res)
			},

			// 页面跳转
			goTabs(url, type) {
				console.log(url, type)
				if (type == 0) {
					uni.reLaunch({
						url: url
					})
				} else if(type == 1) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.openModel('select-module')
				}
			},
			// 跳转角色列表
			reSwitch() {
				if (!this.userInfo) return
				uni.navigateTo({
					url: `../login/applytip?data=${JSON.stringify(this.userInfo)}`
				})
			},
			// 跳转新建工单页面
			selectRadio(val) {
				uni.navigateTo({
					url: '/pagesA/pages/worklist/test?moduleId=' + val.id
				})
			},
			
			// 关闭弹窗
			closePop() {
				this.popShow = false;
			},
			// 新开弹窗
			openModel(ref) {
				if(this.$refs[ref]) {
					this.popShow = true;
					this.$refs[ref].pupshow = true;
				}
			},
		}
	}
</script>

<style lang="scss">
	.uni-ec-canvas {
		width: 50vw;
		height: 50vw;
		display: block;
	}

	.malfunction {
		width: 100vw;
		height: 40vw;
		display: block;
	}

	.icon-box {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		margin-bottom: 10rpx;
	}

	.card-content {
		padding: 20rpx;
		align-items: center;

		.color-div {
			width: 30rpx;
			height: 30rpx;
			margin-right: 6rpx;
			border-radius: 10rpx;
			margin-right: 10rpx;
		}

		.item-list {
			display: flex;
			justify-content: space-between;
			width: 90%;
			margin-bottom: 20rpx;
		}
	}

	.content {
		.user-name {
			font-size: 34rpx;
			font-weight: 500;
		}

		.card {
			border-radius: 10rpx;
			background-color: #fff;

			.info-item {
				font-size: 34rpx;
				font-weight: 600;
			}

			.data-item {
				padding: 0 0 30rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				text-align: center;
				box-sizing: border-box;
				background: linear-gradient(50deg, #ff5e00, #ff851f, #ffaf6b);
				color: #fff;
				border-radius: 10rpx;
				// background: linear-gradient;

				.item {
					width: 25%;
					margin-top: 30rpx;
					border-right: 1px solid #ffffff57;

					.num {
						height: 70rpx;
						line-height: 70rpx;
						font-size: 38rpx;
						font-weight: 700;
					}

					.item-text {}
				}

				.item:nth-child(4n) {
					border-right: none
				}
			}

			.title {
				padding: 20rpx;
				border-bottom: solid 1px #f2f2f2;
			}

			.tab-btn {
				width: 25%;
				margin-bottom: 20rpx;
			}
		}
	}

	.card-list {
		background-color: $uni-bg-color-grey;
		padding: 20rpx;
	}

	.card-item {
		padding: 22px 13px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		text-align: center;
		box-sizing: border-box;

		.item {
			width: 25%;

			.num {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 44rpx;
				font-weight: 700;
			}

			.item-text {
				// height: 48rpx;
				line-height: 48rpx;
				color: grey;
				font-size: 28rpx;
			}
		}
	}
</style>